<script setup lang="ts">
import { addJueSeApi } from '@/api/system'
import { ElMessage, type FormInstance } from 'element-plus'
import { ref } from 'vue'

const props = defineProps<{
  isShow: boolean
  formInfo: any
}>()
console.log(props.formInfo)

const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getList'): void
}>()

const ruleFormRef = ref<any>()
const form = ref<any>({
  ...props.formInfo
})

// 取消
const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('update:isShow', false)
}

const saveFormFn = async () => {
  const params = {
    sqlId: JSON.stringify(['dimMgr.deleteDimSort', 'dimMgr.addDimSort']),
    sqlParam: form.value.val_order
      ? JSON.stringify([
          [
            {
              dim_id: props.formInfo.dimId,
              prop_column: props.formInfo.propCol,
              prop_val: props.formInfo.prop_key,
              val_order: form.value.val_order
            }
          ],
          [
            {
              dim_id: props.formInfo.dimId,
              prop_column: props.formInfo.propCol,
              prop_val: props.formInfo.prop_key,
              val_order: form.value.val_order
            }
          ]
        ])
      : JSON.stringify([
          [
            {
              dim_id: props.formInfo.dimId,
              prop_column: props.formInfo.propCol,
              prop_val: props.formInfo.prop_key,
              val_order: ''
            }
          ],
          []
        ])
  }
  await addJueSeApi(params)
    .then((res: any) => {
      if (res === 'success') {
        emit('getList')
        emit('update:isShow', false)
        ElMessage({ message: '提交成功', type: 'success' })
      } else {
        ElMessage({ message: '提交失败', type: 'error' })
      }
    })
    .catch(() => {
      ElMessage({ message: '提交失败', type: 'error' })
    })
}

// 确定
const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      saveFormFn()
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
}
</script>
<template>
  <div>
    <el-dialog :model-value="true" title="属性值排序修改" @close="Cancel(ruleFormRef)">
      <el-form :model="form" ref="ruleFormRef" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="属性值:">
              <el-input
                :disabled="true"
                v-model="form.prop_column"
                style="width: 300px"
                placeholder="请输入属性值"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序:">
              <el-input v-model="form.val_order" style="width: 300px" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="Confirm(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped></style>
